<template>
  <el-row :gutter="10">
    <el-col :span="3">
      <div class="container" style="min-height:1200px;overflow-y:auto;padding:10px">
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span class="custom-tree-node-data">{{ data.name }}</span>
          </span>
        </el-tree>
      </div>
    </el-col>
    <el-col :span="21" >
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>
                      <span>{{model.name === ''? '请选择接口':model.name}}</span>
                      <el-tag type="success" v-if="model.method === 'GET'">GET</el-tag>
                      <el-tag type="danger" v-else-if="model.method === 'POST'">POST</el-tag>
                      <el-tag type="success" v-if="model.status === 1">正常</el-tag>
                      <el-tag type="danger" v-else-if="model.status === 1">失效</el-tag>
                      <!-- <el-tag type="gray" v-if="model.version !== ''">{{model.version}}</el-tag> -->
                      <!-- <el-tag type="gray" v-if="model.responseContentType !== ''">{{model.responseContentType}}</el-tag> -->
                    </span>
                </div>
                <p>{{model.url}}</p>
            </el-card>
            <el-card class="box-card" style="margin-top:10px">
                <div slot="header" class="clearfix">
                    <span>请求头</span>
                </div>
                <json-editor ref="responseSuccExam" v-model="model.requestHeaderJson" />
            </el-card>
            <el-card class="box-card" style="margin-top:10px">
                <div slot="header" class="clearfix">
                    <span>请求参数</span>
                    <el-button style="float: right;" type="primary" @click="handleTest" :loading="testLoading">测试</el-button>
                </div>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <json-editor ref="responseSuccExam" v-model="model.requestParamJson" />
                  </el-col>
                  <el-col :span="12">
                    <el-table :data="model.requestParamDescList" border class="table" ref="requestParamDescTable">
                      <el-table-column prop="key" label="名称">
                      </el-table-column>
                      <el-table-column prop="isMust" label="必须" width="50">
                        <p slot-scope="scope">
                          {{scope.row.isMust === 'true'?'必须':'可选'}}
                        </p>
                      </el-table-column>
                      <el-table-column prop="type" label="类型" width="70">
                      </el-table-column>
                      <el-table-column prop="defaultValue" label="默认值">
                      </el-table-column>
                      <el-table-column prop="remark" label="备注">
                      </el-table-column>
                    </el-table>       
                  </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card" style="margin-top:10px">
                <div slot="header" class="clearfix">
                    <span>返回参数</span>
                </div>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <json-editor ref="responseSuccExam" v-model="model.responseParamJson" :readOnly=true />
                  </el-col>
                  <el-col :span="12">
                    <el-table :data="model.responseParamDescList" border class="table" ref="requestParamDescTable">
                      <el-table-column prop="key" label="名称">
                      </el-table-column>
                      <el-table-column prop="isMust" label="必须" width="50">
                        <p slot-scope="scope">
                          {{scope.row.isMust === 'true'?'必须':'可选'}}
                        </p>
                      </el-table-column>
                      <el-table-column prop="type" label="类型" width="70">
                      </el-table-column>
                      <el-table-column prop="defaultValue" label="示例">
                      </el-table-column>
                      <el-table-column prop="remark" label="备注">
                      </el-table-column>
                    </el-table>       
                  </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card" style="margin-top:10px">
                <div slot="header" class="clearfix">
                    <span>成功返回示例</span>
                </div>
                <json-editor ref="responseSuccExam" v-model="model.responseSuccExamJson" :readOnly=true />
            </el-card>
            <el-card class="box-card" style="margin-top:10px">
                <div slot="header" class="clearfix">
                    <span>失败返回示例</span>
                </div>
                <json-editor ref="responseSuccExam" v-model="model.responseErrExamJson" :readOnly=true />
            </el-card>
    </el-col>
  </el-row>
</template>
<script>
import { getInterfaceTree, getInfo, interfaceTest } from "@/api/interface/interface"
import jsonEditor from '@/components/JsonEditor'
// import request from '@/utils/request'
import axios from "axios";
import jwt from "@/utils/jwt/index"
export default {
  components: { jsonEditor },
  data() {
    return {
      data: [],
      model: {
        createTime: "",
        createUser: 0,
        description: "",
        id: 0,
        method: "",
        moduleId: 0,
        name: "",
        useJwt: 0,
        requestContentType: "",
        requestHeader: "",
        requestHeaderJson: null,
        requestOther:"",
        requestOtherJson: null,
        requestParam: "",
        requestParamDesc: "",
        requestParamDescList: null,
        requestParamJson: null,
        responseContentType: "",
        responseErrExam: "",
        responseErrExamJson: null,
        responseParam: "",
        responseParamDesc: "",
        responseParamDescList: null,
        responseParamJson: null,
        responseSuccExam: "",
        responseSuccExamJson: null,
        sort: 0,
        status: 0,
        url: "",
        version: ""
      },
      testLoading: false,
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  created() {
    this.getTreeData();
  },
  methods: {
    getTreeData() {
      getInterfaceTree().then(res => {
        this.data = JSON.parse(JSON.stringify(res.data));
      });
    },
    handleNodeClick(data) {
      if (data.type === "interface") {
        getInfo({ id: data.id }).then(res => {
          this.model = res.data;
        });
      }
    },
    handleTest(){
      this.testLoading = true
      let url = this.model.url
      if(this.model.method == "GET"){
        url = url + "?" + json2Form(this.model.requestParamJson);
      }
      var param = this.model.requestParamJson
      if(this.model.useJwt === 1){
        param = jwt.jwt(this.model.requestParamJson)
      }
      interfaceTest({
        url: this.model.url,
        method: this.model.method,
        header: JSON.parse(this.model.requestHeaderJson),
        param: param,
        useJwt: this.model.useJwt
      }).then(res => {
        this.model.responseParamJson = JSON.parse(res.data)
        this.testLoading = false
      }).catch(() => {
        this.testLoading = false
      });
      
    },
    json2Form(json) {
      var str = [];
      for (var p in json) {
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p]));
      }
      return str.join("&");
    },
    listToTree(list){
      list.forEach(item)
    }
  }
};
</script>
